<template>
  <div>
    <div ref="viewTable" class="parentStyle view-table">
      <el-row style="height: 100%" :gutter="15" type="flex">
        <el-col :span="24">
          <el-row>
            <el-col :span="24" style="margin-bottom: 15px;">
              <div ref="listTable" class="list-table" style="position: relative">
                <el-form ref="queryForm" size="mini" :model="queryParams" :inline="true">
                  <el-form-item :label="$t('标签分类')" prop="personChargeName">
                    <el-select v-model="queryParams.tagConfigId" :placeholder="$t('标签分类')" @change="onLabelChange">
                      <el-option v-for="tagConfig in tagTypeList" :key="tagConfig.id" :value="tagConfig.id" :label="tagConfig.name" />
                    </el-select>
                  </el-form-item>
                  <el-form-item :label="$t('项目类型')" prop="dealType">
                    <dict-select
                      v-model="queryParams.dealType"
                      dictionary="deal_type"
                      :placeholder="$t('项目类型')"
                      :clearable="false"
                    />
                  </el-form-item>
                  <el-form-item :label="$t('项目名称')" prop="itemType">
                    <el-input
                      v-model="queryParams.dealName"
                      :placeholder="$t('项目名称')"
                      clearable
                      @keyup.enter.native="queryHandle"
                    />
                  </el-form-item>
                  <el-form-item :label="$t('公司名称')" prop="trackMode">
                    <el-input
                      v-model="queryParams.companyName"
                      :placeholder="$t('公司名称')"
                      clearable
                      @keyup.enter.native="queryHandle"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("查询") }}</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
                  </el-form-item>
                </el-form>
                <el-collapse-transition>
                  <el-row v-if="!closeShow" class="query-wrapper">
                    <el-col :span="24">
                      <div class="search">
                        <div class="query-title">
                          <span>国内城市</span>
                        </div>
                        <div ref="city" class="query-tag" :class="expends.city.showBtn ? 'expendClass' : ''">
                          <el-tag v-for="(city,index) in queryCondition.cityQuery" :key="index" :class="actives.city === index ? 'active' : ''" class="tag" @click="tagSelect(city,'city',index)">{{ city.name + (`(${city.count})`) }}</el-tag>
                        </div>
                        <span v-if="expends.city.show" class="expend-btn" :class="expends.city.showBtn ? 'expendClass' : ''" @click="expandTag('city')">
                          {{ expends.city.showBtn ? $t('收起') : $t('展开') }}<i class="el-icon el-icon-arrow-down" />
                        </span>
                      </div>
                    </el-col>
                    <el-col :span="24">
                      <div class="search">
                        <div class="query-title">
                          <span>项目阶段</span>
                        </div>
                        <div ref="flow" class="query-tag" :class="expends.flow.showBtn ? 'expendClass' : ''">
                          <el-tag v-for="(flow,index) in queryCondition.dealStage" :key="index" :class="actives.flow === index ? 'active' : ''" class="tag" @click="tagSelect(flow,'flow',index)">{{ flow.name + (`(${flow.count})`) }}</el-tag>
                        </div>
                        <span v-if="expends.flow.show" class="expend-btn" :class="expends.flow.showBtn ? 'expendClass' : ''" @click="expandTag('flow')">
                          {{ expends.flow.showBtn ? $t('收起') : $t('展开') }}<i class="el-icon el-icon-arrow-down" />
                        </span>
                      </div>
                    </el-col>
                    <el-col :span="24">
                      <div class="search">
                        <div class="query-title">
                          <span>关注等级</span>
                        </div>
                        <div ref="level" class="query-tag" :class="expends.level.showBtn ? 'expendClass' : ''">
                          <el-tag v-for="(level,index) in queryCondition.concern" :key="index" :class="actives.level === index ? 'active' : ''" class="tag" @click="tagSelect(level,'level',index)">{{ level.name + (`(${level.count})`) }}</el-tag>
                        </div>
                        <span v-if="expends.level.show" class="expend-btn" :class="expends.flow.showBtn ? 'expendClass' : ''" @click="expandTag('level')">
                          {{ expends.level.showBtn ? $t('收起') : $t('展开') }}<i class="el-icon el-icon-arrow-down" />
                        </span>
                      </div>
                    </el-col>
                    <el-col :span="24">
                      <div class="search">
                        <div class="query-title">
                          <span>聚焦行业</span>
                        </div>
                        <div ref="focusOn" class="query-tag" :class="expends.focusOn.showBtn ? 'expendClass' : ''">
                          <el-tag v-for="(focus,index) in queryCondition.focusOn" :key="index" :class="actives.focusOn === index ? 'active' : ''" class="tag" @click="tagSelect(focus,'focusOn',index)">{{ focus.name + (`(${focus.count})`) }}</el-tag>
                        </div>
                        <span v-if="expends.focusOn.show" class="expend-btn" :class="expends.focusOn.showBtn ? 'expendClass' : ''" @click="expandTag('focusOn')">
                          {{ expends.focusOn.showBtn ? $t('收起') : $t('展开') }}<i class="el-icon el-icon-arrow-down" />
                        </span>
                      </div>
                    </el-col>
                    <el-col :span="24">
                      <div class="search">
                        <div class="query-title">
                          <span>负责人</span>
                        </div>
                        <div ref="personCharge" class="query-tag" :class="expends.personCharge.showBtn ? 'expendClass' : ''">
                          <el-tag v-for="(user,index) in queryCondition.personCharge" :key="index" :class="actives.personCharge === index ? 'active' : ''" class="tag" @click="tagSelect(user,'personCharge',index)">{{ user.name + (`(${user.count})`) }}</el-tag>
                        </div>
                        <span v-if="expends.personCharge.show" class="expend-btn" :class="expends.personCharge.showBtn ? 'expendClass' : ''" @click="expandTag('personCharge')">
                          {{ expends.personCharge.showBtn ? $t('收起') : $t('展开') }}<i class="el-icon el-icon-arrow-down" />
                        </span>
                      </div>
                    </el-col>
                    <el-col :span="24">
                      <div class="search">
                        <div class="query-title">
                          <span>项目跟踪</span>
                        </div>
                        <div ref="dealTrack" class="query-tag" :class="expends.dealTrack.showBtn ? 'expendClass' : ''">
                          <el-tag v-for="(track,index) in queryCondition.dealTrack" :key="index" :class="actives.dealTrack === index ? 'active' : ''" class="tag" @click="tagSelect(track,'dealTrack',index)">{{ track.name + (`(${track.count})`) }}</el-tag>
                        </div>
                        <span v-if="expends.dealTrack.show" class="expend-btn" :class="expends.dealTrack.showBtn ? 'expendClass' : ''" @click="expandTag('dealTrack')">
                          {{ expends.dealTrack.showBtn ? $t('收起') : $t('展开') }}<i class="el-icon el-icon-arrow-down" />
                        </span>
                      </div>
                    </el-col>
                  </el-row>
                </el-collapse-transition>
                <div class="close-btn" @click="expand">{{ closeShow ? $t('点击展开更多') : $t('点击收起') }} <i class="el-icon el-icon-d-arrow-right arrow-close" :style="{transform:'rotate(' + (closeShow ? '90deg' : '-90deg') + ')'}" /></div>
              </div>
            </el-col>
            <el-col :span="24">
              <el-row type="flex" :gutter="15" class="mt20">
                <el-col :span="4" class="slider-bar">
                  <div v-loading="sideLoading" class="list-table slider-bar-content" :style="{'height': viewMaxHeight > 0 ? viewMaxHeight + 85 + 'px' : ''}">
                    <el-tree
                      ref="tree"
                      :props="props"
                      :load="loadNode"
                      :data="tagInfoList"
                      :check-on-click-node="true"
                      node-key="id"
                      lazy
                      class="tree"
                      :highlight-current="true"
                      @node-click="clickNode"
                      @node-expand="handlerExpand"
                    >
                      <span slot-scope="{node,data}">
                        <span style="font-size: 12px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display: inline-block;">{{ node.label }}{{ data.count || data.count === 0 ? `(${data.count})` : '(0)' }}</span>
                      </span>
                    </el-tree>
                  </div>
                </el-col>
                <el-col :span="20">
                  <div class="list-table">
                    <el-table v-loading="tableLoading" tooltip-effect="darkTable" :max-height="viewMaxHeight > 0 ? viewMaxHeight : ''" :data="dealList" border>
                      <el-table-column :label="$t('序号')" type="index" align="center" fixed="left" show-overflow-tooltip width="50">
                        <template slot-scope="scope">
                          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                        </template>
                      </el-table-column>
                      <el-table-column :label="$t('项目名称')" fixed="left" align="center" prop="dealName" :show-overflow-tooltip="true" width="180">
                        <template slot-scope="scope">
                          <a class="link_a" target="_blank" :href="`/deal/home/dealBaseHome?id=${scope.row.id}&companyId=${scope.row.companyId}`">{{ scope.row.dealName }}</a>
                        </template>
                      </el-table-column>
                      <el-table-column :label="$t('公司名称')" align="center" prop="companyName" :show-overflow-tooltip="true" width="220">
                        <template slot-scope="scope">
                          <a class="link_a" target="_blank" :href="`/company/base/companyBaseHome?id=${scope.row.companyId}&companyId=${scope.row.companyId}`">{{ scope.row.companyName }}</a>
                        </template>
                      </el-table-column>
                      <el-table-column :label="$t('项目阶段')" align="center" prop="flowPhase" width="110" />
                      <el-table-column :label="$t('负责人')" align="center" prop="personChargeName" width="110" />
                      <el-table-column :label="$t('聚焦行业')" align="center" prop="distributionDate" width="110" :formatter="formatFocusOn" />
                      <el-table-column :label="$t('最新进展')" align="center" prop="dealTrack" min-width="340" show-overflow-tooltip>
                        <template slot-scope="scope">
                          <span class="link-type" @click="openTrack(scope.row)">{{ scope.row.dealTrack ? scope.row.dealTrack : '新增' }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column :label="$t('操作')" fixed="right" align="center" class-name="small-padding fixed-width" width="110">
                        <template slot-scope="scope">
                          <el-button
                            size="small"
                            type="text"
                            @click="showTagForm(scope.row)"
                          >
                            {{ $t('标签设置') }}
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>

                    <pagination
                      v-show="total>0"
                      :total="total"
                      :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize"
                      @pagination="getList"
                    />
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-drawer
      :visible.sync="formOpen"
      direction="rtl"
      :before-close="handleClose"
      append-to-body
      :show-close="false"
      :with-header="false"
      :modal="false"
    >
      <div class="readOver track">
        <el-form ref="trackForm" v-loading="trackLoading" :model="trackForm" class="dataForm trackForm">
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('最新进展')" prop="details" :rules="[{required:true,message:$t('必填信息'),trigger:'blur'}]">
                <EditorTxt v-if="formOpen" v-model="trackForm.details" class="editTxt" :height="150" :placeholder="$t('最新进展')" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-button type="primary" style="float: right;margin-top: 20px" @click="saveTrack">{{ $t('保存') }}</el-button>
            </el-col>
          </el-row>
        </el-form>
        <div class="track-line">
          <div class="title">{{ $t('跟踪记录') }}</div>
          <div v-loading="lineLoading" class="line-content">
            <ul>
              <li v-for="(item,index) in trackList" :key="item.id" style="border: 1px solid #eee;border-radius: 10px">
                <div class="card" style="padding: 10px">
                  <div class="line-info">
                    <!--                  <div class="avatar" style="background-color:#ff8c00;line-height: 30px;text-align: center;color: #fff;font-weight: bolder;">-->
                    <!--                    <img v-if="item.user.avatar" :src="item.user.avatar" alt="" style="width: 100%">-->
                    <!--                    <span v-else>{{ item.avatar }}</span>-->
                    <!--                  </div>-->
                    <div class="tag" style="display: inline-block;vertical-align: middle">
                      <div class="nickName" style="margin-left: 0;">{{ item.user.nickName }}</div>
                      <div class="time">{{ parseTime(item.happenTime) }}</div>
                      <div style="margin-top: 5px;">
                        <el-tag v-if="item.itemType" size="mini">{{ selectDictLabel(itemTypeOptions,item.itemType) ? selectDictLabel(itemTypeOptions,item.itemType) : item.itemType }}</el-tag>
                        <el-tag v-if="item.trackMode" size="mini">{{ selectDictLabel(trackModeOptions,item.trackMode) ? selectDictLabel(trackModeOptions,item.trackMode) : item.trackMode }}</el-tag>
                      </div>
                    </div>
                  </div>
                  <div class="content" style="background-color: #f6f8fa;border-radius: 10px">
                    <div :ref="'text-parent-' + item.id" :style="item.expend ? 'overflow:visible;display:block' : 'overflow:hidden'" class="line-info line-text" style="margin-top: 20px;padding: 10px;">
                      <span :ref="'text-child-' + item.id" class="text" v-html="item.details" />
                      <div v-if="item.expandShow" class="btn">
                        <el-button type="text" @click="expandTrack(index)">{{ $t(!item.expend ? '展开' : '收起') }}</el-button>
                      </div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-drawer>

    <el-dialog
      v-if="tagOpen"
      :title="$t('标签选择')"
      :visible.sync="tagOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      width="80%"
      append-to-body
      top="60px"
      class="tag-dialog"
    >
      <tag-select
        v-slot
        ref="tagSelect"
        :chosen-tag-data="dynamicTags"
        :tags-bus-data="[]"
        :bus-id="dealId"
        :other-type="'indirect_investment'"
        class="tag-content"
        :bus-type="queryParams.dealType"
        @close="close"
        @submitTag="submitTag"
      />
      <div slot="footer" class="dialog-footer" style="text-align: right;">
        <!--保存 取消按钮-->
        <save-btn :function="submitFormTab" :cancel-func="close" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listDealData, listDealTagType, listQuery, listTagInfo, listTrack } from '@/api/deal/statistics/dealStatistics'
import TagSelect from '@/components/Tag/TagSelect.vue'
import EditorTxt from '@/components/Tinymce'
import { selectDictLabel } from '../../../../utils/ruoyi'
import { saveDealTrack } from '@/api/deal/track/dealTrack'

export default {
  components: { TagSelect, EditorTxt },
  data() {
    return {
      queryParams: {
        dealType: undefined,
        tagConfigId: undefined,
        pageNum: 1,
        pageSize: 10
      },
      tagOpen: false,
      formOpen: false,
      tableLoading: true,
      sideLoading: true,
      queryLoading: true,
      trackLoading: false,
      lineLoading: false,
      dealBaseList: [],
      closeShow: true,
      scrollDisabled: true,
      dealId: undefined,
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      // 标签类型
      tagTypeList: [],
      // 标签列表
      tagInfoList: [],
      active: -1,
      isTreeLoad: false,
      queryCondition: {
        cityQuery: [],
        concern: [],
        dealStage: [],
        dealTrack: [],
        focusOn: [],
        personCharge: []
      },
      trackForm: {
        details: undefined
      },
      expends: {
        city: {
          show: false,
          showBtn: false
        },
        flow: {
          show: false,
          showBtn: false
        },
        level: {
          show: false,
          showBtn: false
        },
        focusOn: {
          show: false,
          showBtn: false
        },
        personCharge: {
          show: false,
          showBtn: false
        },
        dealTrack: {
          show: false,
          showBtn: false
        }
      },
      actives: {
        city: 0,
        flow: 0,
        level: 0,
        focusOn: 0,
        personCharge: 0,
        dealTrack: 0
      },
      maxHeight: 50,
      viewMaxHeight: 0,
      total: 0,
      dealList: [],
      focusOnOptions: [],
      dynamicTags: [],
      trackList: [],
      itemTypeOptions: [],
      trackModeOptions: [],
      dealTypeOptions: [],
      // 根据项目类型和tagConfigId查询，由于两个为异步赋值，导致数据未返回就查询了label，可能会查询不准问题，该值为2，则可以进行查询
      loadOnTagLabel: 0
    }
  },
  watch: {
    loadOnTagLabel() {
      if (this.loadOnTagLabel === 2) {
        this.onLabelChange()
      }
    }
  },
  created() {
    this.getDicts('deal_type').then(res => {
      this.queryParams.dealType = res.data[0].dictValue
      this.dealTypeOptions = res.data
      this.loadOnTagLabel++
    })
    this.getDicts('deal_industry_focus').then(res => {
      this.focusOnOptions = res.data
    })
    this.getDicts('item_type').then(res => {
      this.itemTypeOptions = res.data
    })
    this.getDicts('track_mode').then(res => {
      this.trackModeOptions = res.data
    })
    listDealTagType().then(res => {
      this.tagTypeList = res.data
      this.queryParams.tagConfigId = res.data[0].id
      this.loadOnTagLabel++
    })
    this.getQueryList()
    this.getList()
  },
  mounted() {

  },
  methods: {
    selectDictLabel,
    getList() {
      this.tableLoading = true
      listDealData(this.queryParams).then(res => {
        this.total = res.total
        this.dealList = res.rows
        this.$nextTick(() => {
          setTimeout(() => {
            var sumHeight = this.$refs.viewTable.offsetHeight
            var eleHeight = this.$refs.listTable.offsetHeight
            if (this.viewMaxHeight <= 0) {
              this.viewMaxHeight = sumHeight - eleHeight - 100
            }
            console.log(sumHeight, eleHeight, this.viewMaxHeight)
          }, 600)
        })
        this.tableLoading = false
      })
    },
    expand() {
      this.closeShow = !this.closeShow
      this.calcHeight()
    },
    saveTrack() {
      this.trackLoading = true
      this.trackForm.itemType = 'XMGZJZ'
      this.trackForm.trackMode = 'QT'
      this.trackForm.happenTime = this.parseTime(new Date(), '{y}-{m}-{d}')
      this.trackForm.dealId = this.dealId
      this.$refs.trackForm.validate(valid => {
        if (valid) {
          saveDealTrack(this.trackForm).then(res => {
            if (res.code === 200) {
              this.formOpen = false
              this.$message.success(this.$t('保存成功'))
              this.trackLoading = false
              this.trackForm.details = undefined
              this.getQueryList()
              this.getList()
            }
          })
        }
      })
    },
    handlerExpand() {
      this.$nextTick(() => {
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.queryParams.tagId)
        })
      })
    },
    openTrack(row) {
      this.formOpen = true
      this.trackLoading = false
      this.lineLoading = true

      this.dealId = row.id
      listTrack(row.id).then(res => {
        this.trackList = res.rows
        this.trackList.forEach(item => {
          this.$nextTick(() => {
            var parent = this.$refs['text-parent-' + item.id] && this.$refs['text-parent-' + item.id].length > 0 ? (this.$refs['text-parent-' + item.id])[0].scrollHeight : 0
            var child = this.$refs['text-parent-' + item.id] && this.$refs['text-parent-' + item.id].length > 0 ? (this.$refs['text-parent-' + item.id])[0].clientHeight : 0
            console.log(parent, child)
            if (parent > child) {
              this.$set(item, 'expandShow', true)
            }
          })
        })
        this.lineLoading = false
      })
    },
    expandTrack(index) {
      this.$set(this.trackList[index], 'expend', !this.trackList[index].expend)
    },
    expandTag(ref) {
      this.expends[ref].showBtn = !this.expends[ref].showBtn
    },
    submitFormTab() {
      this.$refs.tagSelect.submitForm()
    },
    onLabelChange() {
      // 查询左侧标签
      this.sideLoading = true
      var query = {
        tagParentId: '0',
        tagConfigId: this.queryParams.tagConfigId,
        dealType: this.queryParams.dealType,
        tagLevel: '1',
        companyName: this.queryParams.companyName,
        dealName: this.queryParams.dealName,
        cityId: this.queryParams.cityId,
        flowPhash: this.queryParams.flowPhash,
        focusOn: this.queryParams.focusOn,
        concernLevel: this.queryParams.concernLevel,
        personCharge: this.queryParams.personCharge,
        dealTrack: this.queryParams.dealTrack
      }
      listTagInfo(query).then(res => {
        this.tagInfoList = res.data
        this.sideLoading = false
        this.isTreeLoad = true
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(this.queryParams.tagId)
        })
      })

      this.getQueryList()
    },
    showTagForm(row) {
      this.dealId = row.id
      this.tagOpen = true
    },
    submitTag(data) {
      console.log('标签传值data', data)
      this.tagOpen = false
      this.dynamicTags = data.formArray
    },
    handleClose() {
      this.formOpen = false
    },
    close() {
      this.tagOpen = false
      this.$nextTick(() => {
        this.onLabelChange()
        this.getList()
      })
    },
    loadNode(node, resolve) {
      if (!this.isTreeLoad) return
      var data = node.data
      var query = {
        tagParentId: data.id,
        tagConfigId: this.queryParams.tagConfigId,
        dealType: this.queryParams.dealType,
        tagLevel: node.level + 1,
        companyName: this.queryParams.companyName,
        dealName: this.queryParams.dealName,
        cityId: this.queryParams.cityId,
        flowPhash: this.queryParams.flowPhash,
        focusOn: this.queryParams.focusOn,
        concernLevel: this.queryParams.concernLevel,
        personCharge: this.queryParams.personCharge,
        dealTrack: this.queryParams.dealTrack
      }
      listTagInfo(query).then(res => {
        return resolve(res.data)
      })
    },
    clickNode(data, node) {
      this.queryParams.tagLevel = node.level
      this.queryParams.tagId = data.id
      this.queryParams.configId = this.queryParams.tagConfigId
      this.getQueryList()
      this.getList()
    },
    getQueryList() {
      listQuery(this.queryParams).then(res => {
        this.queryCondition = res.data

        this.queryParams.cityId = res.data['cityQuery'][this.actives.city].id
        this.queryParams.concernLevel = res.data['concern'][this.actives.level].id
        this.queryParams.focusOn = res.data['focusOn'][this.actives.focusOn].id
        this.queryParams.personCharge = res.data['personCharge'][this.actives.personCharge].id
        this.queryParams.dealTrack = res.data['dealTrack'][this.actives.dealTrack].id
        this.queryParams.flowPhash = res.data['dealStage'][this.actives.flow].id

        console.log(this.queryParams.tagId)

        this.calcHeight()
      })
    },

    queryHandle() {
      this.queryParams.pageNum = 1
      this.onLabelChange()
      this.getList()
    },

    resetQuery() {
      this.queryParams = {
        dealType: this.dealTypeOptions[0].dictValue,
          tagConfigId: this.tagTypeList[0].id,
          pageNum: 1,
          pageSize: 10
      }
      this.actives = {
        city: 0,
          flow: 0,
          level: 0,
          focusOn: 0,
          personCharge: 0,
          dealTrack: 0
      }
      this.onLabelChange()
      this.getList()
    },

    tagSelect(tag, type, index) {
      this.actives[type] = index

      switch (type) {
        case 'city':
          this.queryParams.cityId = tag.id
          break
        case 'flow':
          this.queryParams.flowPhash = tag.id
          break
        case 'focusOn':
          this.queryParams.focusOn = tag.id
          break
        case 'personCharge':
          this.queryParams.personCharge = tag.id
          break
        case 'dealTrack':
          this.queryParams.dealTrack = tag.id
          break
        case 'level':
          this.queryParams.concernLevel = tag.id
          break
      }
      this.onLabelChange()
      this.getList()
    },

    calcHeight() {
      // 获取元素的宽
      if (!this.closeShow) {
        this.$nextTick(() => {
          var tagBoxWidth = document.getElementsByClassName('query-tag')[0].clientWidth
          this.calcShowExpend('city', tagBoxWidth)
          this.calcShowExpend('flow', tagBoxWidth)
          this.calcShowExpend('level', tagBoxWidth)
          this.calcShowExpend('focusOn', tagBoxWidth)
          this.calcShowExpend('personCharge', tagBoxWidth)
          this.calcShowExpend('dealTrack', tagBoxWidth)
        })
      }
    },

    calcShowExpend(ref, maxWdith) {
      this.$nextTick(() => {
        var tags = this.$refs[ref].children
        var sum = 0
        for (let i = 0; i < tags.length; i++) {
          if (sum - maxWdith > 0) {
            this.expends[ref].show = true
            break
          }
          sum += tags[i].clientWidth
        }
      })
    },

    formatFocusOn(row) {
      return this.selectDictLabel(this.focusOnOptions, row.focusIndustry)
    }
  }
}
</script>

<style scoped>

</style>
<style scoped lang="scss">
@import "@/assets/styles/variables.scss";
  .slider-bar-content {
    height: 80%;
    overflow: auto;
  }
  .query-title {
    font-weight: bolder;
    padding: 5px 0;
    font-size: 12px;
  }
  .query-tag{
    padding: 10px 0;
    width: calc(100% - 60px);
    display: inline-block;
    height: 50px;
    overflow:hidden;
    transition: all linear .2s 0s;
    .tag {
      height: 30px;
      line-height: 28px;
      border-radius: 15px;
      margin-right: 10px;
      background-color: #f5f6fb;
      border-color: #f5f6fb;
      color: #818487;
      padding: 0 20px;
      margin-bottom: 10px;
    }
  }
  .search {
    position: relative;
  }
  .expend-btn{
    font-size: 14px;
    cursor: pointer;
    color: #c4c8cd;
    position: absolute;
    right: 0;
    top: 44px;
    i {
      margin-left: 5px;
      transition: all linear .2s 0s;
    }
  }
  .expend-btn:hover {
    color: $menuActiveText;
  }
  .close-btn{
    width: 120px;
    background-color: #fff;
    height: 30px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    bottom: - 30px;
    padding: 0 10px;
    font-size: 13px;
    color: #a3a6a9;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
    z-index:99;
    .arrow-close {
      transform: rotate(90deg);
    }
    .query-wrapper {
      overflow: hidden
    }
  }
  /deep/.tree {
    width: 100%;
    overflow: auto;
    display: block;
    .el-tree-node.is-current>.el-tree-node__content {
      color: $menuActiveText;
    }
  }

  .expendClass {
    height: auto !important;
    i {
      transform: rotate(-180deg);
    }
  }
  /deep/.tag.active {
    background-color: #fff;
    border-color: $menuActiveText;
    color: $menuActiveText;
  }

.tag-dialog .tag-content {
  height: 600px;
  overflow: auto;
}
/deep/.mce-top-part>.mce-container-body{
  display: none;
}
/deep/.mce-statusbar{
  display: none;
}
.track {
  padding: 15px 30px;
}
/deep/.trackForm {
  .el-form-item__content {
    padding-right: 0;
  }
}

.track-line {
  .title {
    font-size: 16px;
    font-weight: bolder;
  }
  ul li {
    position: relative;
    margin-top: 20px;
    margin-left: 5px;
    .avatar {
      width: 30px;
      height: 30px;
      display: inline-block;
      border-radius: 50%;
      background: #000;
      vertical-align: middle;
    }
    .nickName {
      font-size: 12px;
      display: inline-block;
      vertical-align: middle;
      font-weight: 400;
      color: #babcbe;
      margin-right: 10px;
      margin-left: 5px;
    }
    .time {
      font-size: 12px;
      font-weight: 400;
      color: #babcbe;
      display: inline-block;
      vertical-align: middle;
    }
    .line-info {
      //margin-top: 20px;
      word-break: break-all;
    }
  }
  //ul li::before {
  //  content: '';
  //  position: absolute;
  //  width: 3px;
  //  height: 100%;
  //  left: -15px;
  //  background-color: $menuActiveText;
  //}
}
/deep/.el-tag{
  cursor: pointer;
}
/deep/.editTxt{
  .tox-statusbar{
    display: none;
  }
  .tox-toolbar-overlord .tox-toolbar {
    display: none;
  }
  .tox-menubar{
    display: none;
  }
}
/deep/.line-info{
  color: #333;
  font-size: 13px;
  ul li {
    line-height: 1.5;
  }
  div{
    line-height: 1.5;
  }
  p {
    font-size: 13px !important;
    line-height: 1.5!important;
  }
  p span{
    font-size: 13px !important;
    line-height: 1.5!important;
  }
}
.content{
  .line-text{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: clip;
    word-break: break-all;
    -webkit-box-orient: vertical;
    line-height: 1.5;
    .btn {
      position: absolute;
      right: 20px;
      bottom: 15px;
      background-image: linear-gradient(to right, rgba(246, 248, 250,0) , rgba(246, 248, 250,1) 80% );
      background-color: rgb(246, 248, 250);
      padding-left: 5px;
      .el-button {
        padding-top: 0;
        padding-bottom: 0;
      }
    }
  }
}
</style>
